<template>
  <div class="app-container">
    <div class="warp_padding">
      <el-page-header @back="goBack" :content="this.$route.query.title"></el-page-header>
      <div class="btn_box">
        <el-button type="success" size="mini" icon="el-icon-download">
          <a href="/console/教师导入模板.xlsx" v-if="this.type == 1">下载模板</a>
          <a href="/console/学生导入模板.xlsx" v-if="this.type == 2">下载模板</a>
        </el-button>
      </div>
      <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
      <el-button type="danger" icon="el-icon-upload2" size="mini"  @click="btn"  :disabled="this.tableData.length === 0"  v-if="this.tableData.length != 0">上传服务器</el-button>


      <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;" v-if="this.tableData.length != 0">
        <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
      </el-table>
    </div>

    <div v-if="btnFlag" class="go-top" @click="backTop">
      <i class="el-icon-upload2"></i>
    </div>
  </div>
</template>

<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import { uploadStu, uploadTea } from '@/api/request'
export default {
  name: 'UploadExcel',
  components: { UploadExcelComponent },
  data() {
    return {
      tableData: [],
      tableHeader: [],
      type:'',
      btnFlag:false
    }
  },
  mounted:function(){
    this.type = this.$route.query.id
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods: {
    backTop () {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    }, 
    scrollToTop () {
      const that = this
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 60) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    },
    goBack() {
      this.$router.go(-1)
    },
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true
      }

      this.$message({
        message: '上传的文件大小不能超过1M.',
        type: 'warning'
      })
      return false
    },
    handleSuccess({ results, header }) {
      this.tableData = results
      this.tableHeader = header
    },
    async btn(){
      let  array =  this.tableData
      if (this.type == 1) {
        var keyMap = {    
          "姓名" : "teaName",    
          "性别" : "sex",
          "密码" : "password",
          "手机号" : "mobile",
          "身份证号码" : "cardId",
          "状态" : "status",
          "所属角色" : "roleIds",
          "班主任" : "isClasssponsor",
          "班主任班级" : "classIds",
          "老师简介" : "remark",
          "教师类型" : "teaType",
          "科目" : "subjectNames",
          "电子邮箱" : "email",
          "一句话介绍自己" : "declaration",
        };
      }
      if (this.type == 2) {
        var keyMap = {    
          "姓名" : "stuName",    
          "性别" : "sex",
          "密码" : "password",
          "状态" : "status",
          "身份证号码" : "cardId",
          "手机号" : "mobile",
          "所属角色" : "roleIds",
          "所属学校" : "cardId",
          "学生简介" : "remark",
          "家庭详细地址" : "familyAddress",
          "转校生" : "isTransfer",
          "家长姓名" : "parentName",
          "家长手机" : "parentMobile",
        };
      }

      for(let i = 0;i < array.length;i++){      
        let obj = array[i];        
        for(let key in obj){                   
            let newKey = keyMap[key];                   
            if(newKey){
                obj[newKey] = obj[key]; 
                delete obj[key];
            }
        }
      }
      try { 
            if (this.type == 1) {
              let Result = await uploadTea(array)
              this.$notify({
                  title: '导入成功',
                  type: 'success',
                  duration: 2500
              })
              setTimeout(() => {
                  this.$router.push({
                      path: '/usermanage/index',
                  })
              }, 300)  
            }else{
              let Result = await uploadStu(array)
              this.$notify({
                  title: '导入成功',
                  type: 'success',
                  duration: 2500
              })
              setTimeout(() => {
                  this.$router.push({
                      path: '/usermanage/userstu',
                  })
              }, 300)  
            }

          } catch (e) {
                console.log(e)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.btn_box{
  margin:15px 0 25px 0;
  a{
    color: #fff
  }
}
.go-top{
  position: fixed;
  right: 30px;
  bottom: 54px;
  background-color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 6px rgba(0,0,0,.12);
  cursor: pointer;
  z-index: 5;
  i{
    font-size:29px;
    color:#409eff;
  }
}
</style>